<link rel="stylesheet" href="/css/tableStyle.css">
<style scoped>
    #materialDetail {
        background-color: #fff;
        min-height: 80vh;
        position: relative;
    }

    .top-view {
        display: flex;
        align-items: center;
        padding: 15px;
    }

    .detail-wrapper {
        padding: 0 15px;
        padding-bottom: 10px;
    }

    .detail-wrapper .title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .detail-wrapper .list {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .detail-wrapper .list .item {
        cursor: pointer;
    }

    .detail-wrapper .list img,
    .detail-wrapper .list video {
        display: block;
        width: 100%;
        height: 9vw;
        object-fit: cover;
        border-radius: 2px;
    }

    .video-box {
        position: relative;
    }

    .video-box .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 0 !important;
    }

    .modal-dialog {
        position: relative;
    }

    .modal-body {
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .modal-img {
        height: 40vh !important;
        margin: 0 auto;
        object-fit: cover;
    }

    .modal-video {
        width: 100%;
        height: 100%;
    }

    .img-carousel {
        display: flex;
        overflow-x: auto;
        width: 500px;
        position: absolute;
        bottom: -100px;
        left: 200px;
        gap: 10px;
        padding-bottom: 10px;
    }

    .img-carousel::-webkit-scrollbar {
        background-color: transparent;
        height: 10px;
    }

    .img-carousel::-webkit-scrollbar-track {
        background-color: #E2E2E2;
        border-radius: 5px;
    }

    .img-carousel::-webkit-scrollbar-thumb {
        height: 10px;
        background-color: #8E8E8E;
        border-radius: 5px;
    }

    .img-carousel li,
    .img-carousel .active {
        flex-shrink: 0;
        width: 70px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid transparent;
        border-radius: 5px;
        overflow: hidden;
    }

    .img-carousel .active {
        border: 2px solid #337ab7;
    }

    .img-carousel li img {
        width: 100%;
        height: 100%;
    }
</style>

<div id="materialDetail">
    <div class="top-view">
        <button class="btn btn-dropbox">
            <i class="fa fa-filter"></i><span class="hidden-xs">筛选</span>
        </button>
    </div>

    <div class="detail-wrapper">
        <div class="title" v-if="!!imgList.length">图片</div>
        <div class="list" v-if="!!imgList.length">
            <div class="item" v-for="item in imgList" :key="item" v-on:click="openModal(item,'img')">
                <img :src="getImgUrl(item)">
            </div>
        </div>

        <div class="title" v-if="!!videoList.length">视频</div>
        <div class="list" v-if="!!videoList.length">
            <div class="item" v-for="item in videoList" :key="item" v-on:click="openModal(item,'video')">
                <div class="video-box">
                    <video :src="getImgUrl(item)"></video>
                    <img class="play-icon" src="/imgs/sourceMaterial/video-play.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="source-material-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">快速浏览</h4>
                </div>
                <div class="modal-body">
                    <div v-if="modalForm.type === 'img'" id="myCarousel" class="carousel slide" :data-interval="false">
                        <ol class="carousel-indicators img-carousel">
                            <li v-for="(item,index) in imgList" :key="index"
                                :id="`carousel-indicator` + index" data-target="#myCarousel" :data-slide-to="index">
                                <img :src="getImgUrl(item)">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item" :id="`carousel-item` + index" v-for="(item,index) in imgList"
                                :key="item">
                                <img class="modal-img" :src="getImgUrl(item)" />
                            </div>
                        </div>
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                                aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span _ngcontent-c3=""
                                aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>

                    <video v-if="modalForm.type === 'video'" :src="modalForm.url" class="modal-video"
                        controls></video>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
    const newAuth = '{{ $newAuth }}';
    const ossPrefix = '{{ config('oss.url') }}';

    const materialDetail = new Vue({
        el: '#materialDetail',
        data() {
            return {
                account: '',
                imgList: [],
                videoList: [],
                modalForm: {
                    url: '',
                    type: '',
                }
            }
        },
        methods: {
            openModal(item, type) {
                this.modalForm.url = this.getImgUrl(item)
                this.modalForm.type = type
                $('#source-material-modal').modal('show')
                setTimeout(() => {
                    $('#carousel-indicator' + this.imgList.indexOf(item)).addClass('active').siblings()
                        .removeClass(
                            'active')
                    $('#carousel-item' + this.imgList.indexOf(item)).addClass('active').siblings()
                        .removeClass(
                            'active')
                }, 200);
            },
            getDetail() {
                const serialNumber = location.pathname.split('/').pop()
                const account = location.search.split('?account=')[1]
                this.account = account || ''
                ajaxPostFunc('/v1/api/sourceMaterial/detail', {
                    serialNumber
                }, {
                    'newAuth': newAuth
                }, res => {
                    this.imgList = res.img_ids || []
                    this.videoList = res.video_ids || []
                })
            },
            getImgUrl(path) {
                return getImgUrlFunc(path, ossPrefix)
            },
        },
        mounted() {
            this.getDetail()
        }
    })
</script>
